<template>
    <div class="container">
        <div class="header">
            <div class="group">
                <Button type="success" class="output-btn">数据导出</Button>
                <Input search placeholder="请输入证件号" style="margin-right: 10px; width: 200px;" />
                <DatePicker type="date" multiple placeholder="选择开始时间" style="width: 200px; margin-right: 5px;"></DatePicker>
                <DatePicker type="date" multiple placeholder="选择结束时间" style="width: 200px; margin-right: 10px;"></DatePicker>
            </div>
            <div class="total-num">总记录: 25068条</div>
        </div>
        <!--<div class="op-frame">-->
            <!---->
        <!--</div>-->
        <div class="content">
            <Table width="100%" height="auto" border :columns="columns2" :data="data4"></Table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      columns2: [
        {
          title: '状态',
          key: 'staus',
          width: 100,
          align: 'center',
          fixed: 'left',
          filters: [
            {
              label: '待提报',
              value: '待提报'
            },
            {
              label: '已提报',
              value: '已提报'
            },
            {
              label: '已审核',
              value: '已审核'
            },
            {
              label: '待审核',
              value: '待审核'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '待提报') {
              return row.staus === '待提报'
            } else if (value === '已提报') {
              return row.staus === '已提报'
            } else if (value === '已审核') {
              return row.staus === '已审核'
            } else if (value === '待审核') {
              return row.staus === '待审核'
            }
          }
        },
        {
          title: '姓名',
          key: 'name',
          width: 100,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          width: 100,
          align: 'center',
          filters: [
            {
              label: '男',
              value: '男'
            },
            {
              label: '女',
              value: '女'
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === '男') {
              return row.sex === '男'
            } else if (value === '女') {
              return row.sex === '女'
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
          sortable: true
        },
        {
          title: '证件类型',
          key: 'card_type',
          align: 'center',
          width: 150
        },
        {
          title: '证件号',
          key: 'card_no',
          align: 'center',
          width: 200
        },
        {
          title: '联系电话',
          key: 'tel',
          align: 'center',
          width: 150
        },
        {
          title: '国籍',
          key: 'gj',
          align: 'center',
          width: 150
        },
        {
          title: '户籍地址',
          key: 'address',
          align: 'center',
          width: 150
        },
        {
          title: '护照号',
          key: 'passport',
          align: 'center',
          width: 150
        },
        {
          title: '入境时间',
          key: 'in_time',
          align: 'center',
          width: 150,
          sortable: true
        },
        {
          title: '人员来自国',
          key: 'come_from',
          align: 'center',
          width: 150
        },
        {
          title: '人员入境口岸',
          key: 'rjka',
          align: 'center',
          width: 200
        },
        {
          title: '人员来沈日期',
          key: 'lsrq',
          align: 'center',
          width: 200,
          sortable: true
        },
        {
          title: '目标城市',
          key: 'mbcs',
          align: 'center',
          width: 200
        },
        {
          title: '在沈地址',
          key: 'zsdz',
          align: 'center',
          width: 200
        },
        {
          title: '操作',
          align: 'center',
          key: 'action',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提报'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '审批'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '发布')
            ])
          }
        }
      ],
      data4: [
        {
          staus: '待提报',
          name: '赵文立',
          sex: '男',
          age: '51',
          card_type: '身份证',
          card_no: '210522196905104413',
          tel: '15841410749',
          gj: '中国',
          address: '辽宁省桓仁满族自治县五里甸镇三架窝棚村围上19号',
          passport: 'EC1861316',
          in_time: '2020-03-07',
          come_from: '德国',
          rjka: '首都机场',
          lsrq: '2020-03-07',
          mbcs: '桓仁',
          zsdz: ''
        },
        {
          staus: '待提报',
          name: '穆旭龙',
          sex: '男',
          age: '20',
          card_type: '身份证',
          card_no: '210104200004281732',
          tel: '13700000949',
          gj: '中国',
          address: '辽宁省沈阳市沈河区东陵西路73-11号1-7-2',
          passport: 'EH2091738',
          in_time: '2020-03-07',
          come_from: '韩国',
          rjka: '浦东机场',
          lsrq: '2020-03-08',
          mbcs: '沈阳',
          zsdz: '沈阳市沈河区东陵西路73-11号1-7-2'
        },
        {
          staus: '待提报',
          name: '薛文艳',
          sex: '女',
          age: '51',
          card_type: '身份证',
          card_no: '210122196910144522',
          tel: '15712455063',
          gj: '中国',
          address: '辽宁省辽中县西环街36-4号13-2-1-1',
          passport: 'E59405669',
          in_time: '2020-03-08',
          come_from: '韩国',
          rjka: '浦东机场',
          lsrq: '2020-03-08',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市辽中县西环街36-4号13-2-1-1'
        },
        {
          staus: '待提报',
          name: '曹红',
          sex: '女',
          age: '51',
          card_type: '身份证',
          card_no: '210104196903011761',
          tel: '18624005786',
          gj: '中国',
          address: '辽宁省沈阳市大东区青光街23-1号',
          passport: 'EH1145766',
          in_time: '2020-03-08',
          come_from: '韩国',
          rjka: '浦东机场',
          lsrq: '2020-03-08',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市大东区南卡门路开健康都19号楼361'
        },
        {
          staus: '待提报',
          name: '赵彬杉',
          sex: '男',
          age: '23',
          card_type: '身份证',
          card_no: '210423199711142416',
          tel: '13842399328',
          gj: '中国',
          address: '辽宁省抚顺市清原县土口子乡安村河北12号',
          passport: 'E86384964',
          in_time: '2020-03-12',
          come_from: '韩国仁川',
          rjka: '首都机场',
          lsrq: '2020-03-12',
          mbcs: '其他省市',
          zsdz: ''
        },
        {
          staus: '待提报',
          name: '杨静',
          sex: '女',
          age: '62',
          card_type: '身份证',
          card_no: '211002195801015639',
          tel: '13941919346',
          gj: '中国',
          address: '辽宁省辽阳市太子河区建设路26栋8号',
          passport: 'EH3797555',
          in_time: '2020-03-12',
          come_from: '日本',
          rjka: '浦东机场',
          lsrq: '2020-03-12',
          mbcs: '其他省市',
          zsdz: ''
        },
        {
          staus: '已审核',
          name: '金哲海',
          sex: '男',
          age: '42',
          card_type: '身份证',
          card_no: '210421197811090631',
          tel: '13804190789',
          gj: '中国',
          address: '辽宁省抚顺市望花区李石镇小瓦鲜村96号',
          passport: 'G45090486',
          in_time: '2020-03-12',
          come_from: '韩国首尔',
          rjka: '首都机场',
          lsrq: '2020-03-12',
          mbcs: '其他省市',
          zsdz: ''
        },
        {
          staus: '已提报',
          name: '赵今晗',
          sex: '女',
          age: '16',
          card_type: '身份证',
          card_no: '210304200401241022',
          tel: '18104202599',
          gj: '中国',
          address: '辽宁省鞍山市丽山区朝阳一街40栋2单元6层24号',
          passport: 'EG2029431',
          in_time: '2020-03-12',
          come_from: '意大利',
          rjka: '首都机场',
          lsrq: '2020-03-13',
          mbcs: '其他省市',
          zsdz: ''
        },
        {
          staus: '已提报',
          name: '徐业华',
          sex: '男',
          age: '58',
          card_type: '身份证',
          card_no: '210103196207231852',
          tel: '15002468668',
          gj: '中国',
          address: '辽宁省沈阳市浑南区临波路18-3号1-24-3',
          passport: 'EC2460628',
          in_time: '2020-03-23',
          come_from: '日本',
          rjka: '浦东机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市浑南区和颐酒店万达店1101房'
        },
        {
          staus: '待提报',
          name: '史盛皓',
          sex: '男',
          age: '23',
          card_type: '身份证',
          card_no: '210105199703184318',
          tel: '18524468705',
          gj: '中国',
          address: '辽宁省沈阳市沈北新区蒲南路1-18号1-5-1',
          passport: 'EB4109089',
          in_time: '2020-03-13',
          come_from: '丹麦',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '沈阳市沈河区山东堡路42-2号3-5-1'
        },
        {
          staus: '已提报',
          name: '吴佩珊',
          sex: '女',
          age: '39',
          card_type: '身份证',
          card_no: '210103198112301220',
          tel: '13840249061',
          gj: '中国',
          address: '辽宁省沈阳市沈河区沈阳路206-3号1-4-1',
          passport: 'EG7853731',
          in_time: '2020-03-13',
          come_from: '德国',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市沈河区沈阳路206-3号1-4-1'
        },
        {
          staus: '已提报',
          name: '尹玲',
          sex: '女',
          age: '28',
          card_type: '身份证',
          card_no: '210103199205285420',
          tel: '13504977182',
          gj: '中国',
          address: '辽宁省沈阳市沈河区大南街154-1号2-4-3',
          passport: 'E07241903',
          in_time: '2020-03-13',
          come_from: '韩国',
          rjka: '桃仙机场',
          lsrq: '2020-03-13',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市沈河区大南街154-1号2-4-3'
        },
        {
          staus: '已提报',
          name: '马婧怡',
          sex: '女',
          age: '20',
          card_type: '身份证',
          card_no: '210503200002160625',
          tel: '15941477869',
          gj: '中国',
          address: '辽宁省沈阳市铁西区北二路亚美利加6号楼1-901',
          passport: 'E78058113',
          in_time: '2020-03-15',
          come_from: '英国',
          rjka: '首都机场',
          lsrq: '2020-03-28',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市铁西区北二路亚美利加6号楼1-901'
        },
        {
          staus: '已提报',
          name: '孙雷',
          sex: '男',
          age: '48',
          card_type: '身份证',
          card_no: '210102197203156910',
          tel: '13889324255',
          gj: '中国',
          address: '辽宁省丹东市元宝区县前街59号楼1单元802室',
          passport: 'EH1133309',
          in_time: '2020-03-15',
          come_from: '保加利亚',
          rjka: '首都机场',
          lsrq: '2020-03-18',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市浑南区恒大江湾城小区16号楼902'
        },
        {
          staus: '已提报',
          name: '林皓玉',
          sex: '女',
          age: '21',
          card_type: '身份证',
          card_no: '420106199901216021',
          tel: '13419525634',
          gj: '中国',
          address: '武汉市武昌区建安街101号世安花园4栋2单元601号',
          passport: 'ED8045770',
          in_time: '2020-03-14',
          come_from: '捷克',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市沈河区奉天街214号甲锦江之星619房间'
        },
        {
          staus: '已审核',
          name: 'DR9152772',
          sex: '女',
          age: '29',
          card_type: '护照号',
          card_no: 'DR9152772',
          tel: '17702447880',
          gj: '巴基斯坦',
          address: '',
          passport: 'DR9152772',
          in_time: '2020-03-13',
          come_from: '巴基斯坦',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '沈阳市铁西区云峰北街北三东路中国移动小区16-2-1'
        },
        {
          staus: '已审核',
          name: '蒋素英',
          sex: '女',
          age: '57',
          card_type: '身份证',
          card_no: '210105196301075000',
          tel: '15640472188',
          gj: '中国',
          address: '辽宁省沈阳市皇姑区陵东街',
          passport: 'E86982084',
          in_time: '2020-03-14',
          come_from: '意大利',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市皇姑区陵东街海德公园16号楼582'
        },
        {
          staus: '已提报',
          name: '翟德印',
          sex: '男',
          age: '53',
          card_type: '身份证',
          card_no: '210422196710122114',
          tel: '13889109886',
          gj: '中国',
          address: '沈阳市大东区',
          passport: 'G46052635',
          in_time: '2020-03-14',
          come_from: '意大利',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市大东区东望街和谐城1期3号楼1-6-1'
        },
        {
          staus: '已提报',
          name: '赵辰龙',
          sex: '男',
          age: '32',
          card_type: '身份证',
          card_no: '110101198807262559',
          tel: '13381395726',
          gj: '中国',
          address: '北京市朝阳区朝阳公园西路7号院1号楼5单元901',
          passport: 'EE6117508',
          in_time: '2020-03-14',
          come_from: '日本',
          rjka: '浦东机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市辽中区浦东街道近海新苑18号1单元402'
        },
        {
          staus: '待审核',
          name: '高文明',
          sex: '男',
          age: '69',
          card_type: '身份证',
          card_no: '211003195104080714',
          tel: '13941990083',
          gj: '中国',
          address: '辽宁省沈阳市浑南区全运路99-27号2-11-1',
          passport: 'EH6765301',
          in_time: '2020-03-14',
          come_from: '加拿大',
          rjka: '首都机场',
          lsrq: '2020-03-15',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市浑南区全运路99号百合苑A区2号802'
        },
        {
          staus: '已提报',
          name: '刘潇逸',
          sex: '男',
          age: '26',
          card_type: '身份证',
          card_no: '211481199408080632',
          tel: '13166757570',
          gj: '中国',
          address: '辽宁省沈阳市浑南区智慧三街33-64号2-6-1',
          passport: 'EE7978744',
          in_time: '2020-03-14',
          come_from: '日本',
          rjka: '首都机场',
          lsrq: '2020-03-14',
          mbcs: '沈阳',
          zsdz: '辽宁省沈阳市皇姑区鸭绿江东街华策雷凯铂院5号楼2-1'
        }]
    }
  }
}
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .op-frame {
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        display: flex;
    }
    .group {
        display: flex;
    }
    .output-btn {
        margin-right: 10px;
    }
</style>
